<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>小小画板</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./style/index.css">
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <ul class="color">
      <li data-color="#333"></li>
      <li data-color="#ff4757"></li>
      <li data-color="#ff6348"></li>
      <li data-color="#5352ed"></li>
    </ul>
    <div class="tool">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="200px" height="199.80px" viewBox="0 0 1025 1024" version="1.1"><path fill="#333333" d="M940.64 82.56c-52.64-52.576-121.952-82.56-190.272-82.56-57.632 0-110.688 21.376-149.44 60.064l-155.744 156.928c-0.48 0.448-1.024 0.736-1.504 1.216-0.256 0.256-0.416 0.608-0.672 0.832l0.064 0.064-330.528 333.088c-15.232 15.136-26.272 33.984-32.416 54.56l-75.168 272.256c-0.064 0.736-4.96 22.112-4.96 32.992 0 61.824 50.208 112 112.128 112 12.32 0 36.16-5.888 37.024-6.016l271.296-71.328c20.608-6.112 39.328-17.248 54.56-32.512l488.416-492.256c88.832-88.896 78.816-237.888-22.784-339.328zM512.448 761.44c-2.624-28.864-10.784-57.184-23.008-84.064l302.56-302.528c18.496 58.432 8.992 119.552-31.552 160.128-0.256 0.256-0.576 0.416-0.8 0.672l0.448 0.416-247.296 249.28c0-7.968 0.384-15.776-0.352-23.904zM473.376 648.192c-11.936-19.616-25.504-38.56-42.304-55.328-19.552-19.552-41.984-34.88-65.408-47.744l305.024-305.024c23.936 10.624 46.88 25.76 67.136 46.016 17.312 17.248 30.688 36.576 40.992 56.672l-305.44 305.408zM335.552 529.984c-29.632-11.936-60.672-18.752-91.776-19.168l246.496-248.384c37.728-36.8 92.672-47.392 146.784-33.984l-301.504 301.536zM133.344 955.936c-3.488 0.8-14.336 3.552-21.696 4.064-26.304-0.32-47.648-21.696-47.648-48 0.384-5.376 2.528-14.624 3.264-17.984l33.696-122.048c36.576-0.992 75.936 13.248 106.88 44.256 31.424 31.36 46.208 71.488 44.608 108.512l-119.104 31.2zM283.968 916.384c-0.768-42.944-18.24-87.616-53.504-122.816-33.344-33.376-76.992-52.64-120.512-54.368l31.872-115.424c2.304-7.68 6.88-15.264 12.512-21.888 64.192-45.952 162.912-32.384 231.488 36.256 72.544 72.512 83.744 178.752 27.872 242.176-3.712 1.952-7.456 3.808-11.488 4.992l-118.24 31.072zM918.112 376.704l-53.888 54.304c0-7.232 0.864-14.176 0.192-21.568-5.632-61.92-34.496-121.792-81.376-168.608-52.128-52.16-121.248-82.08-189.696-82.272l52.992-53.44c26.528-26.464 63.552-41.12 104.032-41.12 51.488 0 104.384 23.296 145.056 63.84 38.176 38.112 60.928 85.472 64.192 133.376 3.008 44.704-11.744 85.696-41.504 115.488z"/></svg>
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="200px" height="199.80px" viewBox="0 0 1025 1024" version="1.1"><path fill="#333333" d="M978.817649 939.233112H522.995705l476.613823-476.613823c12.795002-12.795002 20.791878-33.58688 20.791878-55.978133s-7.996876-38.385006-20.791878-55.978134L673.336978 22.791097c-30.38813-30.38813-76.770012-30.38813-107.158142 0L84.766888 504.203046c-110.356892 110.356892-110.356892 294.285045 0 404.641936l30.38813 30.38813c55.978134 55.978134 127.95002 84.766888 204.720031 84.766888h662.141351c25.590004 0 43.183132-17.593128 43.183131-43.183132s-20.791878-41.583756-46.381882-41.583756z m-361.458805-847.668879l315.076923 315.076923-366.256931 366.256931-315.076923-315.076923L617.358844 91.564233zM143.943772 849.668098c-76.770012-76.770012-76.770012-204.720031 0-284.688793l46.381882-46.381882L507.001952 832.074971l-46.381882 46.381882c-38.385006 38.385006-89.565014 59.176884-140.745021 59.176884-55.978134 0-107.158141-20.791878-145.543147-59.176884L143.943772 849.668098z"/></svg>
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"><path fill="#333333" d="M848.457143 359.716571c-21.942857 0-43.885714 14.628571-43.885714 36.571429v512c0 21.942857-14.628571 36.571429-36.571429 36.571429h-512c-21.942857 0-36.571429-14.628571-36.571429-36.571429v-519.314286c0-21.942857-14.628571-36.571429-36.571428-36.571428s-36.571429 21.942857-36.571429 36.571428v519.314286c0 58.514286 43.885714 109.714286 109.714286 109.714286h519.314286c58.514286 0 117.028571-51.2 117.028571-109.714286v-512c-7.314286-21.942857-21.942857-36.571429-43.885714-36.571429z m-416.914286 438.857143v-402.285714c0-21.942857-14.628571-36.571429-36.571428-36.571429-14.628571 0-29.257143 14.628571-29.257143 36.571429v402.285714c0 14.628571 14.628571 36.571429 36.571428 36.571429 14.628571 0 29.257143-21.942857 29.257143-36.571429z m226.742857 0v-402.285714c0-21.942857-14.628571-36.571429-36.571428-36.571429s-36.571429 14.628571-36.571429 36.571429v402.285714c0 14.628571 14.628571 36.571429 36.571429 36.571429s36.571429-21.942857 36.571428-36.571429z m329.142857-585.142857H804.571429v-73.142857c0-65.828571-43.885714-109.714286-109.714286-109.714286h-365.714286c-65.828571 0-109.714286 43.885714-109.714286 109.714286v73.142857H36.571429c-21.942857 0-36.571429 14.628571-36.571429 36.571429s14.628571 36.571429 36.571429 36.571428h950.857142c21.942857-7.314286 36.571429-21.942857 36.571429-36.571428s-14.628571-36.571429-36.571429-36.571429z m-256 0H285.257143v-73.142857c0-21.942857 21.942857-36.571429 43.885714-36.571429h373.028572c14.628571 0 29.257143 14.628571 29.257142 36.571429v73.142857z"/></svg>
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="200px" height="195.61px" viewBox="0 0 1047 1024" version="1.1"><path fill="#333333" d="M240.29932 425.004374L465.63552 650.863761a81.198464 81.198464 0 0 0 114.630048 0l225.807068-225.859387a45.203268 45.203268 0 0 0-63.881008-63.881008l-173.802382 173.802382V46.740912a45.203268 45.203268 0 1 0-90.354218 0V535.187341L304.232646 361.332641a45.203268 45.203268 0 1 0-63.933326 63.671733zM858.025004 121.033321a45.203268 45.203268 0 1 0 0 90.354218 98.358964 98.358964 0 0 1 98.202008 98.202008v525.801908a98.358964 98.358964 0 0 1-98.202008 98.254327H188.346952a98.358964 98.358964 0 0 1-98.202008-98.202008V309.641866A98.358964 98.358964 0 0 1 188.346952 211.387539a45.203268 45.203268 0 1 0 0-90.354218 188.817819 188.817819 0 0 0-188.346952 188.346952v525.801908a188.817819 188.817819 0 0 0 188.346952 188.346952h669.678052a188.817819 188.817819 0 0 0 188.346952-188.346952V309.641866a188.817819 188.817819 0 0 0-188.346952-188.608545z"/></svg>
    </div>
    <div class="line">
      <div class="line-item">
        <div class="light"></div>
      </div>
      <div class="line-item">
        <div class="normal"></div>
      </div>
      <div class="line-item">
        <div class="blod"></div>
      </div>
    </div>
  </body>
  <script src="./js/utils.js"></script>
  <script src="./js/handle.js"></script>
  <script src="./js/index.js"></script>
</html>
